<template>
  <t-dialog :header="`${row.talents.name}-审批`" :visible.sync="visible" :onClose="closeDialog"
    :closeOnOverlayClick="false" :confirmBtn="null" mode="full-screen" top="5%">
    <div style="height: 80vh;">
      <t-tabs v-model="value" size="medium">
        <t-tab-panel :class="[reviewOpen ? 'tab-full-panel' : 'tab-panel']" value="1" label="基本信息">
          <t-form :colon="true" labelAlign="top" ref="form" class="step-form table-form">
            <t-row>
              <t-col :span="1" class="title">项目概况</t-col>
              <t-col :span="11" class="sub-col">
                <t-row style="width: 100%">
                  <t-col :span="2" class="title">人才姓名</t-col>
                  <t-col :span="10">
                    <t-form-item name="name">
                      {{ row.talents.name }}
                    </t-form-item>
                  </t-col>
                </t-row>

                <t-row style="width: 100%">
                  <t-col :span="2" class="title">业务名称</t-col>
                  <t-col :span="10">
                    <t-form-item name="businessName">
                      {{ data.businessName }}
                    </t-form-item>
                  </t-col>
                </t-row>

                <t-row>
                  <t-col :span="2" class="title">审批业务类型</t-col>
                  <t-col :span="10">
                    {{ data.approveType | filterByDict(dict.type.approve_type) }}
                  </t-col>

                </t-row>
                <t-row>
                  <t-col :span="2" class="title">审批意见</t-col>
                  <t-col :span="10">
                    <t-form-item name="opinion">
                      {{ data.opinion }}
                    </t-form-item>
                  </t-col>
                </t-row>
                <t-row>
                  <t-col :span="2" class="title">审批结果</t-col>
                  <t-col :span="10">
                    <t-form-item name="approveStatus" v-show="data.approveStatus">
                      {{ row.approveStatus | filterByDict(dict.type.approve_status) }}
                    </t-form-item>
                    <t-form-item name="approveStatus" v-show="!data.approveStatus">
                      未提交
                    </t-form-item>

                  </t-col>
                </t-row>


              </t-col>
            </t-row>

          </t-form>
          <!-- <project-digest-dialog :objId="dialog.objId" :visible.sync="dialog.open_digest"
          v-if="dialog.open_digest"></project-digest-dialog> -->
        </t-tab-panel>
      </t-tabs>


      <t-drawer :visible.sync="drawerVisible" showInAttachedElement :showOverlay="false" size="37%"
        :preventScrollThrough="false" header="审批内容">
        <t-form label-align="top" :disabled="!reviewOpen" ref="form" :data="formData" :rules="rules">
          <t-form-item label="审批业务类型" name="approveType">
            <t-select disabled v-model="formData.approveType" clearable :options="dict.type.approve_type">
            </t-select>
          </t-form-item>

          <t-form-item name="opinion" label="审批意见">
            <template slot="label">
              审批意见
            </template>
            <t-textarea :autosize="{ minRows: 8 }" v-model="formData.opinion" placeholder="请输入内容" />
          </t-form-item>

          <t-form-item label="审批结果" name="approveStatus">
            <t-radio-group v-model="formData.approveStatus">
              <t-radio value="3" label="通过"></t-radio>
              <t-radio value="4" label="退回"></t-radio>
            </t-radio-group>
          </t-form-item>

        </t-form>
        <template #footer>
          <t-button theme="default" @click="closeDrawer">关闭审批界面</t-button>
          <t-button theme="default" variant="outline" @click="drawerApproveVisible = true">审批记录</t-button>
          <!-- <t-button v-if="reviewOpen" theme="primary" @click="onSubmit(1)">暂存</t-button> -->
          <t-button v-if="reviewOpen" theme="primary" @click="onSubmit(2)">提交审批</t-button>
        </template>
      </t-drawer>

      <t-drawer :visible.sync="drawerApproveVisible" showInAttachedElement :showOverlay="false" size="80%"
        :preventScrollThrough="false" header="审批记录">
        <approve-list v-if="drawerApproveVisible" :row="row" :isDialog="false" :objId="row.businessId"></approve-list>
        <template #footer>
          <t-button theme="default" @click="drawerApproveVisible = false">关闭审批记录</t-button>
        </template>
      </t-drawer>

    </div>

    <template #footer>
      <t-button theme="default" @click="closeDialog">取消</t-button>
      <t-button theme="default" variant="outline" @click="drawerApproveVisible = true">审批记录</t-button>
      <t-button theme="primary" @click="drawerVisible = true">打开审批界面</t-button>
    </template>
  </t-dialog>
</template>

<script>
import { VITE_FILE_DOMAIN } from '@/api/upload'
import ApproveList from "./approve-list.vue";

export default {
  name: "approve-info",
  components: {
    ApproveList,
  },
  props: {
    row: Object,
    reviewOpen: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      file_domain: VITE_FILE_DOMAIN,
      drawerVisible: false,
      drawerApproveVisible: false,
      dialog: {
        objId: 0
      },
      formData: {
        id: this.row.id,
        businessId: this.row.businessId,
        approveType: this.row.approveType,
        opinion: '',
        approveStatus: "3",
      },
      rules: {
        opinion: [
          { required: true, message: "不能为空" }
        ],
        approveStatus: [
          { required: true, message: "审批结果不能为空" }
        ],
      },

      visible: true,
      value: "1",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        approveType: '',
        businessName: '',
      },
      data: [],
      columns: [
        // {
        //   colKey: "businessId",
        //   title: "业务id",
        //   align: "center"
        // },
        {
          colKey: "businessName",
          title: "业务名称",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "approveType",
          title: "审批业务类型",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "approverName",
          title: "审批人",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "deptName",
          title: "单位",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "opinion",
          title: "审批意见",
          align: "center",
          width: 300
        },
        {
          colKey: "approveStatus",
          title: "审批结果",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "createTime",
          title: "审批时间",
          align: "center",
          ellipsis: true
        },
      ],

      dataLoading: false,
    }
  },
  computed: {},
  dicts: ['approve_status', 'approve_type'],
  async created () {

    Object.assign(this.formData, this.row);
    this.getApproveList()

  },
  methods: {
    getApproveList () {
      console.log(this.row);

      this.dataLoading = true;
      this.$api.kjrc.approve.getDetailData(this.row.id).then(response => {
        this.data = response.data;
        this.dataLoading = false;
      }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    closeDialog () {
      this.$emit("update:visible", false);
    },
    closeDrawer () {
      this.drawerVisible = false
    },
    onSubmit (type) {
      if (type === 1) {
        this.$api.kjrc.approve.opApprove(this.formData).then(response => {
          this.$message.success('暂存成功');
          this.$emit("reload");
          this.$emit("update:visible", false);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      } else {
        this.$refs.form.validate().then((validateResult) => {
          if (validateResult === true) {
            let loading = false;
            const confirmDia = this.$dialog.confirm({
              header: "审批提示",
              body: `是否确认提交？`,
              confirmBtn: {
                content: loading ? '提交中...' : '提交',
                theme: 'primary',
                loading,
              },
              theme: "warning",
              onConfirm: ({ e }) => {
                if (this.formData.approveStatus === "3" && !this.formData.opinion) {
                  this.formData.opinion = "通过"
                }
                loading = true
                confirmDia.update({
                  confirmBtn: {
                    loading: true,
                  },
                })
                this.$api.kjrc.approve.opApprove(this.formData).then(response => {
                  this.$message.success('提交成功');
                  this.$emit("reload");
                  this.$emit("update:visible", false);
                  confirmDia.destroy();
                  loading = false
                }).catch((e) => {
                  loading = false
                  confirmDia.update({
                    confirmBtn: {
                      loading: false,
                    },
                  })
                  this.$message.error(e.toString());
                });
              },
            })

          } else {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            this.$message.error(firstError);
          }
        })
      }

    },
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel {
  padding: 10px;
}

//.t-form__item {
//  margin-bottom: 6px
//}

.t-row {
  margin-bottom: 14px;
}

.step-card {
  height: 100%;
  margin-bottom: 14px;
}

::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
  background-color: var(--td-scrollbar-color);
}

/deep/ .t-drawer .t-drawer__content-wrapper {
  height: calc(100% - var(--td-comp-size-xxxl));
  margin-top: var(--td-comp-size-xxxl);
}

/deep/ .t-drawer__header {
  display: none;
}
</style>
